<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
	<title>主界面</title>
	<!--引入elementui得样式-->
	<link type="text/css" rel="stylesheet" href="/css/index.css"/>
	<!--引入vue得依赖必须再elementui之前引入vue-->
	<script type="text/javascript" src="/js/vue.js"></script>
	<script type="text/javascript" src="/js/index.js"></script>
	<script type="text/javascript" src="/js/axios.min.js"></script>
	<script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<style>
	*{
		margin: 0;
		padding:0;
	}

	/*修改head和foot的背景颜色*/
	.el-header, .el-footer {
		background-color: rgb(48, 65, 86) !important;
		color:rgb(255, 255, 255) !important;
		text-align: center;
		line-height: 60px;
	}

	/*修改左侧菜单栏的背景颜色*/
	.el-aside {
		background-color: rgb(48, 65, 86) !important;
		color: #333;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		height: 600px;
	}
	.el-submenu .el-menu-item {
		min-width: 197px;
	}
	.el-menu{
		border-right:  0px ;
	}


	body > .el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
	/*修改菜单栏鼠标浮动时的背景颜色*/
	.el-submenu__title:hover, .el-menu-item:focus, .el-menu-item:hover{
		background-color: #212F3C !important;
	}
	.el-avatar{
		margin:7px 9px 0px 4px;
	}
	.nameInfo{
		float: right;
		margin: 0px 10px 0px auto;
		color: white;
	}
	.el-dropdown {
		float: right;
		height: 40px;
	}
	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}
	.el-icon-arrow-down {
		font-size: 12px;
	}
	.demonstration {
		display: block;
		color: #8492a6;
		font-size: 14px;
		margin-bottom: 20px;
	}
</style>
<body>
<div id="app">
	<el-container style="height: 100%">
		<el-header>
			<h1 style="display: inline-block">欢迎来到AAA大医院后台管理系统</h1>
			<el-dropdown :show-timeout="100" @command="handleCommand">
				  <span class="el-dropdown-link">
					  <el-avatar :src="headInfo.adminUrl"></el-avatar>
					  <span class="nameInfo">欢迎{{headInfo.name}}</span>
				  </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="a">个人信息</el-dropdown-item>
					<el-dropdown-item command="b">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<el-menu
						default-active="2"
						class="el-menu-vertical-demo"
						text-color="#fff"
						active-text-color="#ffd04b"
						background-color="rgb(48, 65, 86)">
					<el-submenu :index="menu.pId.toString()" v-for="menu in leftMenu">
						<template slot="title">{{menu.pName}}</template>
						<el-menu-item :index="child.pId.toString()" v-for="child in menu.children" @click="showContent(child.pUrl,child.pName)">
							<a style="color: white;text-decoration: none"    >{{child.pName}}</a>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-main>
				<!--标签页-->
				<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
					<el-tab-pane
							v-for="(item, index) in editableTabs"
							:key="item.name"
							:label="item.title"
							:name="item.name"
					>
						<!--   {{item.content}}-->
						<iframe :src="item.url"  frameborder="0" width="100%" height="600px;"></iframe>
					</el-tab-pane>
				</el-tabs>
			</el-main>
		</el-container>
		<!--<el-footer>Footer</el-footer>-->
	</el-container>
</div>
</body>
<script>
	var app=new Vue({
		el:"#app",
		data:{
			//左侧菜单
			leftMenu:[],
			//标签页 开始
			editableTabsValue: '1',
			editableTabs: [{
				title: '个人信息',
				name: '1',
				url: '/adminInfo.html'
			}],
			tabIndex: 1,
			//登录用户头像
			headInfo:{},
		},
		created(){
			this.initLeftMenu();
			axios.get("/admin/headImg").then(res=>{
				this.headInfo = res.data.data;
			})
		},
		methods:{
			//点击右上角个人信息
			handleCommand(command) {
				if (command=="a"){
					this.addTab("个人信息","/adminInfo.html")
				}else{
					if(confirm("确认退出登录吗?")){
						axios.get("admin/loginOut").then(res=>{
							if(res.data.code===200){
								this.$message.success("退出登录成功")
								window.location.href="/adminlog.html"
							}
						})
					}

				}
			},
			initLeftMenu(){
				axios.post("/permission/leftpermission").then(resp=>{
					console.log(resp);
					this.leftMenu=resp.data.data;
				})
			},
			//显示当前连接的内容
			showContent(pUrl,menupName){
				//alert(url+","+menuName);
				//直接调用添加页签页
				this.addTab(menupName,pUrl);
			},
			//添加标签页
			addTab(targetName,pUrl) { //targetName 页签页名称   url 对应的地址
				let newTabName = ++this.tabIndex + '';
				//获取所有的标签页
				let tabs = this.editableTabs;
				//定义是否已经标签变量
				var  isHaveTab = false;
				//循环所有页签页 判断当前点击标签页名称已经存在
				tabs.forEach((tab, index) => {
					//如果为true 说明当前点击节点（部门管理），已经存在标签页
					if(targetName === tab.title){// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
						isHaveTab = true;
						newTabName =tab.name;
						console.log(tab);
					}
				});
				//如果不存在 添加一个
				if(!isHaveTab) {
					this.editableTabs.push({
						title: targetName,
						name: newTabName,
						url: pUrl,
						// content: 'New Tab content'
					});
					console.log(pUrl);
				}
				//如果存在，直接让高亮
				this.editableTabsValue = newTabName;
			},
			//移除页签页
			removeTab(targetName) {
				let tabs = this.editableTabs;
				let activeName = this.editableTabsValue;
				if (activeName === targetName) {
					tabs.forEach((tab, index) => {
						if (tab.name === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								activeName = nextTab.name;
							}
						}
					});
				}
				this.editableTabsValue = activeName;
				this.editableTabs = tabs.filter(tab => tab.name !== targetName);
			},
		}
	})
</script>
<style>
	html,body,#app{
		margin: 0px;
		padding: 0px;
		height: 100%;
	}
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.el-header, .el-footer {
		background-color: #B3C0D1;
		color: #333;
	}

	.el-aside {
		background-color: #545c64;
		color: #333;
		height: 100%;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		height: 100%;
	}

	body > .el-container {
		height: 100%;
	}

</style>
</html>

